import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { IState, IUser } from '../../store/reducer'
import { Table } from 'antd'
import { fetchUserList } from '../../api'
import axios from 'axios'
import { getUserList } from '../../store/actions'
// 函数组件
const App: React.FC = () => {
  const list = useSelector<IState, IUser[]>(state => state.list)
  const dispatch = useDispatch()
  const columns = [
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '图片',
      dataIndex: 'avatar',
      key: 'avatar',
      render(value: string) {
        return <img src={value} alt="" width={20} />
      }
    },
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
  ];

  const getUserList = () => {
    // 异步 action 
    // dispatch 本身只可以发送action格式同步的{ type  payload }
    // 启用 redux-thunk dispatch(() => {})
    dispatch(async () => {
      const resp = await fetchUserList()
      dispatch({ type: 'SET_LIST', payload: resp.data.data })
    })
  }


  useEffect(() => {
    getUserList()
  }, [])

  return (
    <div>
      <Table columns={columns} dataSource={list}></Table>
    </div>
  )
}

export default App